Adwaita: Improve popover.menu styling

Based on the mockup:
https://gitlab.gnome.org/Teams/Design/os-mockups/blob/master/menus/menu-design-patterns.png

- Remove horizontal padding from popover.menu contents
- Remove roundness from modelbutton
- Adjust sizing to match the mockup
- Fix visual glitches on button.image-button.model
- Add missing mergin to arrow icons
- Fix accelerator position in rtl direction
- Fix accelerator color

https://gitlab.gnome.org/GNOME/gtk/issues/1824

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index b80fc0a9bde522f1a9711cd6a2357fd6effeca31..357ee5d4eb7ba7a365204c5baab1f85c45797b30 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4865,28 +4865,29 @@ menubar {
 popover.menu {
   padding: 0px;
 
-  & button.image-button.model {
-    padding: 0;
-    border: none;
-    background: none;
-    box-shadow: none;
-  }
-  & button.image-button.model:selected {
-    border: none;
-    color: $selected_fg_color;
-    background: $selected_bg_color;
-  }
-
   & box.inline-buttons {
-    border-radius: 5px;
-    border-style: none;
-    border-width: 0;
-    border-image-source: none;
-    border-image-width: 1px;
+    padding: 0 20px;
+
+    button.image-button.model {
+      @include button(undecorated);
+
+      min-height: 30px;
+      min-width: 30px;
+      padding: 0;
+      border: none;
+      outline: none;
+      transition: none;
+
+      &:selected { @extend %selected_items; }
+    }
   }
 
   & box.circular-buttons {
-    padding-bottom: 5px;
+    padding: 6px 0;
+
+    button.circular.image-button.model {
+      padding: 11px;
+    }
   }
 
   & > arrow,
@@ -4894,38 +4895,42 @@ popover.menu {
     background-color: $menu_color;
   }
 
+  &.background > contents {
+    padding: 8px 0;
+  }
+
   &.background separator {
-    margin: 5px 0px;
+    margin: 6px 0;
   }
 
   & accelerator {
-    margin-left: 20px;
-    color: gray;
-  }
+    color: gtkalpha(currentColor,0.55);
 
-  & box.inline-buttons {
-    padding: 0 5px;
+    &:dir(ltr) { margin-left: 20px; }
+    &:dir(rtl) { margin-right: 20px; }
   }
 
+  & arrow.left,
   & radio.left,
   & check.left {
     margin-left: 0;
-    margin-right: 12px;
+    margin-right: 8px;
   }
 
+  & arrow.right,
   & radio.right,
   & check.right {
-    margin-left: 12px;
+    margin-left: 8px;
     margin-right: 0;
   }
 
-  & modelbutton:selected {
-    color: $selected_fg_color;
-    background-color: $selected_bg_color;
-  }
+  & modelbutton {
+    min-height: 30px;
+    min-width: 40px;
+    padding: 0 20px;
+    border-radius: 0;
 
-  & modelbutton:selected accelerator {
-    color: mix($selected_fg_color, gray, 50%);
+    &:selected { @extend %selected_items; }
   }
 }
 

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 18a50156f8cf11c8f1c75403675ea15e360b36c3..8ec5f683dd36ce71248f53eee0f1fa52ab11d90c 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1905,15 +1905,15 @@ button.titlebutton:backdrop { -gtk-icon-shadow: none; }
 
 .selection-mode headerbar button.titlebutton:backdrop, .selection-mode .titlebar button.titlebutton:backdrop, headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; }
 
-.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { background-color: #15539e; }
+.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected, popover.menu box.inline-buttons button.image-button.model:selected, popover.menu modelbutton:selected { background-color: #15539e; }
 
-label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; }
+label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected, popover.menu box.inline-buttons button.image-button.model:selected, popover.menu modelbutton:selected { color: #ffffff; }
 
-label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { color: #8aa9ce; }
+label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected, popover.menu box.inline-buttons button.image-button.model:disabled:selected, popover.menu modelbutton:disabled:selected { color: #8aa9ce; }
 
-label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected { color: #d6d6d6; }
+label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected, popover.menu box.inline-buttons button.image-button.model:backdrop:selected, popover.menu modelbutton:backdrop:selected { color: #d6d6d6; }
 
-label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected { color: #4f7aaf; }
+label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected, popover.menu box.inline-buttons button.image-button.model:backdrop:disabled:selected, popover.menu modelbutton:backdrop:disabled:selected { color: #4f7aaf; }
 
 .monospace { font-family: monospace; }
 
@@ -2012,29 +2012,31 @@ menubar .csd.popup decoration { border-radius: 0; }
 
 popover.menu { padding: 0px; }
 
-popover.menu button.image-button.model { padding: 0; border: none; background: none; box-shadow: none; }
+popover.menu box.inline-buttons { padding: 0 20px; }
 
-popover.menu button.image-button.model:selected { border: none; color: #ffffff; background: #15539e; }
+popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; }
 
-popover.menu box.inline-buttons { border-radius: 5px; border-style: none; border-width: 0; border-image-source: none; border-image-width: 1px; }
+popover.menu box.circular-buttons { padding: 6px 0; }
 
-popover.menu box.circular-buttons { padding-bottom: 5px; }
+popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; }
 
 popover.menu > arrow, popover.menu.background > contents { background-color: #2f2f2f; }
 
-popover.menu.background separator { margin: 5px 0px; }
+popover.menu.background > contents { padding: 8px 0; }
 
-popover.menu accelerator { margin-left: 20px; color: gray; }
+popover.menu.background separator { margin: 6px 0; }
 
-popover.menu box.inline-buttons { padding: 0 5px; }
+popover.menu accelerator { color: alpha(currentColor,0.55); }
 
-popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 12px; }
+popover.menu accelerator:dir(ltr) { margin-left: 20px; }
 
-popover.menu radio.right, popover.menu check.right { margin-left: 12px; margin-right: 0; }
+popover.menu accelerator:dir(rtl) { margin-right: 20px; }
 
-popover.menu modelbutton:selected { color: #ffffff; background-color: #15539e; }
+popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 8px; }
 
-popover.menu modelbutton:selected accelerator { color: silver; }
+popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 8px; margin-right: 0; }
+
+popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 20px; border-radius: 0; }
 
 statusbar { padding: 6px 10px 6px 10px; }
 

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 2f9c92d3e47fbeb8605826ff331e20d26a1b2174..b896c3c52d47cd97ce0284520f1fd0a29685f808 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1921,15 +1921,15 @@ button.titlebutton:backdrop { -gtk-icon-shadow: none; }
 
 .selection-mode headerbar button.titlebutton:backdrop, .selection-mode .titlebar button.titlebutton:backdrop, headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; }
 
-.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { background-color: #3584e4; }
+.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected, popover.menu box.inline-buttons button.image-button.model:selected, popover.menu modelbutton:selected { background-color: #3584e4; }
 
-label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; }
+label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected, popover.menu box.inline-buttons button.image-button.model:selected, popover.menu modelbutton:selected { color: #ffffff; }
 
-label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { color: #9ac2f2; }
+label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected, popover.menu box.inline-buttons button.image-button.model:disabled:selected, popover.menu modelbutton:disabled:selected { color: #9ac2f2; }
 
-label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected { color: #fcfcfc; }
+label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected, popover.menu box.inline-buttons button.image-button.model:backdrop:selected, popover.menu modelbutton:backdrop:selected { color: #fcfcfc; }
 
-label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected { color: #71a8eb; }
+label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected, popover.menu box.inline-buttons button.image-button.model:backdrop:disabled:selected, popover.menu modelbutton:backdrop:disabled:selected { color: #71a8eb; }
 
 .monospace { font-family: monospace; }
 
@@ -2028,29 +2028,31 @@ menubar .csd.popup decoration { border-radius: 0; }
 
 popover.menu { padding: 0px; }
 
-popover.menu button.image-button.model { padding: 0; border: none; background: none; box-shadow: none; }
+popover.menu box.inline-buttons { padding: 0 20px; }
 
-popover.menu button.image-button.model:selected { border: none; color: #ffffff; background: #3584e4; }
+popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; }
 
-popover.menu box.inline-buttons { border-radius: 5px; border-style: none; border-width: 0; border-image-source: none; border-image-width: 1px; }
+popover.menu box.circular-buttons { padding: 6px 0; }
 
-popover.menu box.circular-buttons { padding-bottom: 5px; }
+popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; }
 
 popover.menu > arrow, popover.menu.background > contents { background-color: #ffffff; }
 
-popover.menu.background separator { margin: 5px 0px; }
+popover.menu.background > contents { padding: 8px 0; }
 
-popover.menu accelerator { margin-left: 20px; color: gray; }
+popover.menu.background separator { margin: 6px 0; }
 
-popover.menu box.inline-buttons { padding: 0 5px; }
+popover.menu accelerator { color: alpha(currentColor,0.55); }
 
-popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 12px; }
+popover.menu accelerator:dir(ltr) { margin-left: 20px; }
 
-popover.menu radio.right, popover.menu check.right { margin-left: 12px; margin-right: 0; }
+popover.menu accelerator:dir(rtl) { margin-right: 20px; }
 
-popover.menu modelbutton:selected { color: #ffffff; background-color: #3584e4; }
+popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 8px; }
 
-popover.menu modelbutton:selected accelerator { color: silver; }
+popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 8px; margin-right: 0; }
+
+popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 20px; border-radius: 0; }
 
 statusbar { padding: 6px 10px 6px 10px; }